<template>
  <div class="container">
    <h2 class="text-center">WebApi 任务调度平台</h2>
    <div class="inputstyle">
      <a-input-password
        ref="inputCode"
        v-model:value="code"
        placeholder="请输入口令"
        @keyup.enter="onSubmit"
      />
    </div>
    <div>
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, ref } from "vue";
import tools from "@/services/tools";
import service from "@/services/service";
import router from "@/router/index";
export default defineComponent({
  setup() {
    const state = reactive({
      code: "",
    });
    const inputCode = ref(null);

    const onSubmit = () => {
      if (!state.code) {
        return tools.message("请输入口令", "警告");
      }

      service.check("Authorization", state.code).then((res) => {
        if (res.code != 1) return;
        tools.setAuthorization(res.data.token);
        router.push("/");
      });
    };
    onMounted(() => {
      //文本框自动放入光标
      inputCode.value.focus();
      tools.delAuthorization();
    });
    return {
      labelCol: {
        span: 4,
      },
      wrapperCol: {
        span: 14,
      },
      ...toRefs(state),
      onSubmit,
      inputCode,
    };
  },
});
</script>
<style scoped>
.container {
  transform: translateY(-50%);
  top: 40%;
  position: absolute;
  margin: 0 auto;
  left: 0;
  width: 350px;
  line-height: 55px;
  right: 0;
}
.inputstyle {
  display: inline-block;
  width: 100%;
  position: relative;
  vertical-align: middle;
  line-height: normal;
}
button {
  width: 100%;
}
</style>
